<template>
	<view>
		<view class="downside">
			<view style="height: 20px;background-color: #fff;"></view>
			<view class="worker_view">
				<view v-for="(classItem, index) in classList" :key="index">
					<view class="class_view">
						<fui-icon :name="isExtendStatus[classItem.classId] ? 'turningdown' : 'turningright'" size="55"
							@tap="changeStatus(classItem.classId)">
						</fui-icon>
						第{{classItem.classId}}班组
					</view>
					<view class="workerList" v-for="worker in workerList[classItem.classId]"
						v-show="isExtendStatus[classItem.classId]">
						<view class="workerName">
							<view style="width: 30%;font-size: 18px;padding-left: 10px;">{{worker.realName}}</view>
							<view style="font-size: 12px;align-self: center;">id:{{worker.userId}}</view>
						</view>
						<view class="workerInfo" @tap="toWorkerInfo(worker.userId)">详情-></view>
					</view>
				</view>
			</view>
			<!-- <view class="search-list">
				<view v-for="classIndex in classList">
					<view class="class_tap" tap="">{{classIndex.classId}}</view>
				</view>
			</view> -->
			<view style="display: flex;align-items: center;align-self: center;margin-top: 20px;color: gray;">没有更多数据了
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../common/request';
	export default {
		data() {
			return {
				workerList: [],
				date: "",
				searchRealName: '',
				classList: [],
				isExtendStatus: {},
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
		},
		onShow() {
			this.getAllClass()
		},
		methods: {
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			toWorkerInfo(userId) {
				uni.navigateTo({
					url: `/pages/workerManage/workerInfo/workerInfo?userId=${userId}`,

				})
			},
			getAllClass() {
				request('/users/class/getClasses', 'GET').then(res => {
					this.classList = res.data.data
					console.log(this.classList)
				}).then(()=>{
					this.getAllUsers()
				})
				
			},
			getAllUsers() {
				this.workerList = []
				for (let i = 0; i < this.classList.length; i++) {
					let classItem = this.classList[i]
					request('/users/class/getClassMembers', 'GET', {
						classId: classItem.classId
					}).then(res => {
						console.log(res.data.data)
						this.$set(this.workerList, classItem.classId, res.data.data);
					});
				}
				console.log("输出工人列表")
				console.log(this.workerList)
			},
			searchWorker() {
				request(`/users/account/getUser/${this.searchRealName}`, 'GET').then(res => {
					if (res.data.code === 1) {
						this.workerList = []
					} else {
						this.workerList = res.data.data
					}
					console.log(res)
					if (res.data.code == 1) {
						console.log(res.data.message)
						this.workerList = []
					} else {
						this.workerList = res.data.data
					}
				})
			},
			changeStatus(classId) {
				// 切换对应 classId 的展开状态
				this.isExtendStatus[classId] = !this.isExtendStatus[classId];
			},
		},
	}
</script>

<style scoped>
	.downside {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.downside-top {
		display: flex;
		margin-top: 20px;
	}

	.downside-title {
		width: 27%;
		padding-left: 15px;
	}

	.worker-search {
		width: 40%;
		background-color: #fff;
		padding: 3px;
	}

	.downside-botom {
		margin-left: 5%;
		margin-right: 5%;
		margin-top: 10px;
		background-color: #fff;
		width: 90%;
	}

	.workerList {
		display: flex;
		padding: 10px;
		height: 30px;
		background-color: #fff;

	}

	.workerName {
		width: 80%;
		display: flex;
	}

	.search {
		background-color: #fff;
		height: 30px;
	}

	.search-list {
		position: absolute;
		min-height: 30%;
		background-color: #b4b4b4;
		width: 20px;
		right: 0px;
		top: 30%;
		display: flex;
		flex-direction: column;
	}

	.class_tap {
		font-size: 25px;
		text-align: center;
	}

	.class_view {
		background-color: #fff;
		padding-left: 10px;
		font-size: 22px;
		padding-bottom: 10px;
	}
</style>